import { AnimationEntryMetadata } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
    // 设置为一个名叫*routeAnimation的动画触发器
    trigger('routeAnimation', [
        // 指定了一个通配符状态 —— *，它匹配该路由组件存在时的任何动画状态。
        state('*',
            style({
                opacity: 1,
                transform: 'translateX(0)'
            })
        ),
        // 定义两个过渡效果
        transition(':enter', [
            style({
                opacity: 0,
                transform: 'translateX(-100%)'
            }),
            animate('0.2s ease-in')
        ]),
        transition(':leave', [
            animate('0.5s ease-out', style({
                opacity: 0,
                transform: 'translateY(100%)'
            }))
        ])
    ]);
